@import "../../colors";
@import "../../frameless";

$base-bg: $ui-white;

.box {
    display: inline-block;
    border: 1px solid $ui-border;
    border-radius: 10px 10px 0 0;
    
    //4 columns
    @media only screen and (max-width: $mobile - 1) {
        width: $cols4;

        .box-header {
            h4 {
                font-size: .9rem;
            }
        }
    }

    //6 columns
    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
        width: $cols6;

        .box-header {
            h4 {
                font-size: 1rem;
            }
        }
    }

    //8 columns
    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
        width: $cols8;

        .box-header {
            h4 {
                font-size: 1.1rem;
            }
        }
    }

    //12 columns
    @media only screen and (min-width: $desktop) {
        width: $cols12;

        .box-header {
            h4 {
                font-size: 1.1rem;
            }
        }
    }

    background-color: $ui-white;
    width: 100%;

    .box-header {
        display: block;
        clear: both;
        margin: 0;
        border-top: 1px solid $ui-white;
        border-bottom: 1px solid $ui-border;
        border-radius: 10px 10px 0 0;
        background-color: $ui-gray;

        padding: 8px 20px;
        height: 20px;
        overflow: hidden;

        h4 {
            display: inline-block;
            float: left;
        }

        p {
            display: inline-block;
            float: right;
            margin: 1px 0 0 0;
            padding: 0;

            font-size: .85rem;
        }
    }

    .box-content {
        display: block;
        clear: both;
        background-color: $base-bg;
        padding: 8px 20px;
    }

    .empty {
        margin-top: 20px;
    }
}
